<template>
	<view
		class="btn flex flex-center animate__fadeInRight animate__animated"
		v-if="cache.lang == 'zh'"
	>
		<image
			class="img"
			src="/static/images/langzh.png"
			mode="aspectFill"
			@click="changeLang('en')"
		></image>
	</view>
	<view class="btn flex flex-center animate__fadeInRight animate__animated" v-else>
		<image
			class="img"
			src="/static/images/langen.png"
			mode="aspectFill"
			@click="changeLang('zh')"
		></image>
	</view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { storage } from "/@/cool/utils";
import { useI18n } from "vue-i18n";
const { cache } = useStore();
const { locale } = useI18n();
const { t } = useI18n();
const { router } = useCool();
const ui = useUi();
const changeLang = (lang: string) => {
	locale.value = lang;
	cache.setLang(lang);
};
</script>

<style lang="scss" scoped>
.btn {
	width: 88rpx;
	height: 88rpx;
	background: #ffffff;
	box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(85, 85, 85, 0.2);
	border-radius: 50%;
	position: fixed;
	top: 300rpx;
	right: 30rpx;
	.img {
		width: 60rpx;
		height: 60rpx;
	}
}
</style>
